import type { Directive, DirectiveBinding } from 'vue'

// 扩展 HTMLElement 类型
declare global {
  interface HTMLElement {
    _decimalInputHandlers?: {
      input: (e: Event) => void
      blur: (e: Event) => void
    }
  }
}

export default {
  mounted(el: HTMLElement, binding: DirectiveBinding, vnode: any) {
    const input = el.tagName === 'INPUT' ? el : el.querySelector('input') as HTMLInputElement;
    if (!input) return;

    const { type = 'number', decimals = 1, min, max } = binding.value || {};
    const component = vnode.componentInstance;

    // 处理输入事件
    const handleInput = (e: Event) => {
      const target = e.target as HTMLInputElement;
      let value = target.value;

      // 允许负号、数字和小数点
      value = value.replace(/[^\d.-]/g, '');
      
      // 处理多个负号的情况（只保留第一个）
      const minusCount = (value.match(/-/g) || []).length;
      if (minusCount > 1) {
        value = value.replace(/-/g, '');
        value = '-' + value;
      }
      
      // 确保负号只能在开头
      if (value.includes('-') && !value.startsWith('-')) {
        value = value.replace(/-/g, '');
        value = '-' + value;
      }

      // 处理多个小数点的情况
      const parts = value.split('.');
      if (parts.length > 2) {
        value = (parts[0] || '') + '.' + (parts[1] || '');
      }

      // 限制小数位数
      if (parts.length === 2) {
        value = (parts[0] || '') + '.' + (parts[1] || '').slice(0, decimals);
      }

      // 转换为数字
      let numValue = parseFloat(value);

      // 处理空值或非法值
      if (isNaN(numValue)) {
        numValue = min || 0;
      }

      // 限制范围
      if (typeof max === 'number' && numValue > max) {
        numValue = max;
      }
      if (typeof min === 'number' && numValue < min) {
        numValue = min;
      }

      // 更新输入框显示
      target.value = value;

      // 更新绑定的数据（确保是数字类型）
      if (component) {
        // 处理 Element Plus 组件
        component.$emit('update:modelValue', numValue);
      } else {
        // 处理原生 input
        const model = vnode.props?.['onUpdate:modelValue'];
        if (model) {
          model(numValue);
        }
      }
    };

    // 处理失去焦点事件（最终格式化）
    const handleBlur = (e: Event) => {
      const target = e.target as HTMLInputElement;
      let numValue = parseFloat(target.value) || min || 0;

      // 确保保留正确的小数位数
      numValue = parseFloat(numValue.toFixed(decimals));

      // 再次检查范围
      if (typeof max === 'number' && numValue > max) {
        numValue = max;
      }
      if (typeof min === 'number' && numValue < min) {
        numValue = min;
      }

      // 更新显示（保持负数的负号）
      const displayValue = numValue.toString();
      target.value = displayValue;

      // 更新绑定的数据
      if (component) {
        component.$emit('update:modelValue', numValue);
      } else {
        const model = vnode.props?.['onUpdate:modelValue'];
        if (model) {
          model(numValue);
        }
      }
    };

    input.addEventListener('input', handleInput);
    input.addEventListener('blur', handleBlur);

    // 保存事件处理器以便解绑
    el._decimalInputHandlers = {
      input: handleInput,
      blur: handleBlur,
    };
  },

  unmounted(el: HTMLElement) {
    if (el._decimalInputHandlers) {
      const { input, blur } = el._decimalInputHandlers;
      el.removeEventListener('input', input);
      el.removeEventListener('blur', blur);
      delete el._decimalInputHandlers;
    }
  },
};
